<template>
    <div>
        <h1>待办事项</h1>
        <div class="common-layout">
            <el-container>
            <el-header><SonHeader @add="addHandle"/></el-header>
            <el-main><SonMain :list="updatePagedList" @finish="changeDad" @cancer="cancerDad" @del="del"/></el-main>
            <div class="pageClass">
                <el-pagination
                    layout="prev,pager,next"
                    :page-size="pageSize"
                    :total="list.length"
                    :current-page="currentPage"
                    @current-change="handlePageChange"

                />
            </div>
            <el-footer><SonFooter :list="list" @show="show"/></el-footer>
            </el-container>
        </div>
    </div>
</template>

<script>
import SonFooter from '@/components/ToDo/SonFooter.vue';
import SonHeader from '@/components/ToDo/SonHeader.vue';
import SonMain from '@/components/ToDo/SonMain.vue';

export default {
    components:{
        SonHeader,
        SonMain,
        SonFooter,
    },
    data() {
        return {
            list:[
                {id:'001',content:'学习第一章',state:false,startDate:'2024-09-10',finishDate:''},
                {id:'002',content:'学习第二章',state:false,startDate:'2024-10-10',finishDate:''},
                {id:'003',content:'学习第三章',state:false,startDate:'2024-11-10',finishDate:''},
                {id:'004',content:'学习第四章',state:false,startDate:'2024-09-10',finishDate:''},
                {id:'005',content:'学习第五章',state:false,startDate:'2024-07-10',finishDate:''},
                {id:'006',content:'学习第六章',state:false,startDate:'2024-03-10',finishDate:''},
                {id:'007',content:'学习第七章',state:false,startDate:'2024-12-10',finishDate:''},
                {id:'008',content:'学习第八章',state:false,startDate:'2024-01-10',finishDate:''},
                {id:'009',content:'学习第九章',state:false,startDate:'2024-02-10',finishDate:''},
                {id:'010',content:'学习第十章',state:false,startDate:'2024-05-10',finishDate:''},
                {id:'011',content:'学习第十一章',state:false,startDate:'2024-06-10',finishDate:''},

            ],
            now:new Date(),
            copyList:[],
            currentPage:1,
            pageSize:10
        }
    },
    created() {
        this.copyList = this.list.slice();
    },
    methods:{
        addHandle(val){
            this.list.push({
                id:+new Date(),
                content:val,
                state:false,
                startDate:this.fomateDate,
                finishDate:''
            });
            this.copyList = this.list.slice();
        },
        changeDad(i){
            this.list[i].finishDate = this.fomateDate;
            this.copyList = this.list.slice();
        },
        cancerDad(i){
            this.list[i].state = false;
            this.copyList = this.list.slice();
        },
        del(i){
            this.list.splice(i,1);
            this.copyList = this.list.slice();
        },
        show(flag){
            if(flag == 'clear'){
                this.list = []
                this.copyList = []
            }else if(flag == 'done'){
                this.list = this.copyList.filter( v=>v.state == true)
            }else if(flag == 'undo'){
                this.list = this.copyList.filter( v=>v.state == false )
            }else{
                this.list = this.copyList.slice()
            }
        },
        handlePageChange(page){
            this.currentPage = page;
        }
    },
    computed:{
        fomateDate(){
            let month = this.now.getMonth() + 1
            return this.now.getFullYear() + '-' + month + '-' + this.now.getDate()
        },
        updatePagedList(){
            const start = (this.currentPage-1) * this.pageSize;
            const end = this.currentPage * this.pageSize;
            return this.list.slice(start, end);
        }
    }
}
</script>

<style>
    #app{
        width: 800px;
        margin: auto;
    }
    .pageClass{
        display: grid;
        place-items: center;
    }
</style>